<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { login, getVerifyCode, registerUser, getUserDetail } from '@/api/user'
import { showToast, showSuccessToast } from 'vant'
import { useUserStore } from '@/stores/user'

const router = useRouter()
const isLogin = ref(true)
const countdown = ref(0)
const timer = ref(null)
const userStore = useUserStore()

const formData = reactive({
  email: '',
  code: ''
})

const validateEmail = (email) => {
  const reg = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
  return reg.test(email)
}

const handleGetCode = async () => {
  if (!formData.email) {
    showToast('请输入邮箱')
    return
  }
  if (!validateEmail(formData.email)) {
    showToast('请输入正确的邮箱格式')
    return
  }
  if (countdown.value > 0) return

  try {
    await getVerifyCode(formData.email)
    showSuccessToast('验证码已发送')
    countdown.value = 60
    timer.value = setInterval(() => {
      countdown.value--
      if (countdown.value <= 0) {
        clearInterval(timer.value)
      }
    }, 1000)
  } catch (error) {
    showToast(error.message || '获取验证码失败')
  }
}

const handleSubmit = async () => {
  if (!formData.email || !formData.code) {
    showToast('请填写完整信息')
    return
  }
  if (!validateEmail(formData.email)) {
    showToast('请输入正确的邮箱格式')
    return
  }

  try {
    if (isLogin.value) {
      await login(formData)
      const res = await getUserDetail()
      userStore.setUserInfo(res.data)
      showSuccessToast('登录成功')
      router.push('/')
    } else {
      await registerUser(formData.email)
      showSuccessToast('注册成功')
      isLogin.value = true
    }
  } catch (error) {
    showToast(error.message || (isLogin.value ? '登录失败' : '注册失败'))
  }
}

const toggleMode = () => {
  isLogin.value = !isLogin.value
  formData.email = ''
  formData.code = ''
}
</script>

<template>
  <div class="login-container">
    <div class="login-header">
      <h2>{{ isLogin ? '登录' : '注册' }}</h2>
      <p>{{ isLogin ? '欢迎回来' : '创建新账号' }}</p>
    </div>
    
    <div class="form-group">
      <van-field
        v-model="formData.email"
        label="邮箱"
        placeholder="请输入邮箱"
        :rules="[{ required: true, message: '请填写邮箱' }]"
      />
      
      <div class="code-field">
        <van-field
          v-model="formData.code"
          label="验证码"
          placeholder="请输入验证码"
        />
        <van-button 
          size="small" 
          type="primary" 
          @click="handleGetCode"
          :disabled="countdown > 0"
          class="code-btn"
        >
          {{ countdown > 0 ? `${countdown}s` : '获取验证码' }}
        </van-button>
      </div>
    </div>

    <div class="submit-btn">
      <van-button 
        block 
        type="primary" 
        @click="handleSubmit"
      >
        {{ isLogin ? '登录' : '注册' }}
      </van-button>
    </div>

    <div class="toggle-mode" @click="toggleMode">
      {{ isLogin ? '没有账号？去注册' : '已有账号？去登录' }}
    </div>
  </div>
</template>

<style scoped lang="scss">
.login-container {
  min-height: 100vh;
  padding: 20px;
  background-color: #fff;
  overflow: hidden;
  .login-header {
    padding: 40px 0;
    text-align: center;
    h2 {
      font-size: 24px;
      color: #333;
      margin-bottom: 8px;
    }
    p {
      color: #999;
      font-size: 14px;
    }
  }

  .form-group {
    margin-bottom: 20px;
    :deep(.van-field) {
      padding: 10px 16px;
    }
    .code-field {
      display: flex;
      align-items: center;
      .code-btn {
        margin-left: 10px;
        flex-shrink: 0;
        border-radius: 4px;
        background: #FF653F;
        border: none;
        height: 36px;
        padding: 0 12px;
      }
    }
  }

  .submit-btn {
    margin: 24px 0;
    :deep(.van-button) {
      height: 44px;
      background: #FF653F;
      border: none;
      border-radius: 4px;
      font-size: 16px;
    }
  }

  .toggle-mode {
    text-align: center;
    color: #666;
    font-size: 14px;
  }
}
</style> 